<template>
  <div class="gl_contentBox group">
    <el-row class="gl_px_15">
      <el-col>
        <el-form ref="createDelegationInput" :model="createDelegationInput" :rules="createDelegationInput_Rules" label-width="110px">
          <el-row :gutter="40">
            <div style="width:220px;float:left" class="gl_ml_20">
              <el-form-item label="机构Logo" prop="imagePath">
                <!-- <el-input v-show="false" v-model.trim="createDelegationInput.imagePath" />
                <photo-cropper-dialog ref="imagePathPhotoCropper" @photoCropperSave="rightLogoPhotoCropperSave" />
                <div class="upload_game_img" @click="openPhotoCropper('imagePath')">
                  <img v-if="createDelegationInput.imagePath" class="show_img" :src="getStaticFileUrl(createDelegationInput.imagePath)" alt="">
                  <img v-else class="show_img" src="@/assets/images/team_default.png" alt="">
                </div> -->
                <div class="upload_game_img">
                  <img v-if="createDelegationInput.imagePath" :src="getStaticFileUrl(createDelegationInput.imagePath)" class="show_img">
                  <img v-else src="@/assets/images/person_default.png" alt="" class="show_img">
                </div>
              </el-form-item>
            </div>
            <div style="width:240px;float:left" class="gl_ml_15">
              <el-row>
                <span class="label">账号名称</span>
                <span class="content">{{ userPhoneNumber ? userPhoneNumber : '- -' }}</span>
              </el-row>
              <el-row>
                <span class="label">机构名称</span>
                <span class="content">{{ createDelegationInput.name ? createDelegationInput.name : '- -' }}</span>
              </el-row>
            </div>
            <div style="width:330px;float:left" class="gl_ml_15">
              <!-- <el-row>
                <span class="label">所属上级</span>
                <span class="content">{{ createDelegationInput.superior ? createDelegationInput.superior : '- -' }}</span>
              </el-row> -->
              <el-row>
                <span class="label">机构简称</span>
                <span class="content">{{ createDelegationInput.shortName ? createDelegationInput.shortName : '- -' }}</span>
              </el-row>
              <el-row>
                <span class="label">地址</span>
                <span v-if="createDelegationInput.addressData" class="content">
                  {{ createDelegationInput.addressData[0] }}-{{ createDelegationInput.addressData[1] }}-{{ createDelegationInput.addressData[2] }}
                </span>
                <span v-else class="content">- -</span>
              </el-row>
            </div>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="中跆协会员号" prop="ctaMemberId">
                <el-input v-model="createDelegationInput.ctaMemberId" placeholder="请输入中跆协会员号" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="省跆协会员号" prop="ptkCode">
                <el-input v-model="createDelegationInput.ptkCode" placeholder="请输入省跆协会员号" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="机构类型" prop="delegationTypeCode">
                <el-select v-model="createDelegationInput.delegationTypeCode" placeholder="请选择机构类型" size="mini" style="width: 100%">
                  <el-option v-for="item in dictDelegationType" :key="item.code" :label="item.value" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="参赛机构名称" prop="teamName">
                <el-input v-model="createDelegationInput.teamName" placeholder="请输入参赛机构名称" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="参赛机构简称" prop="teamShortName">
                <el-input v-model="createDelegationInput.teamShortName" placeholder="请输入参赛机构简称" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="联系人" prop="contactPerson">
                <el-input v-model="createDelegationInput.contactPerson" placeholder="请输入联系人" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="联系人手机号" prop="phoneNumber">
                <el-input v-model="createDelegationInput.phoneNumber" placeholder="请输入联系人手机号" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="机构认证">
              <div v-if="createDelegationInput.isApproved == null" class="gl_color_warning">
                <span>等待审核</span>
              </div>
              <el-button v-else-if="!createDelegationInput.isApproved" type="primary" size="mini" @click="goAuthentication()">去认证</el-button>
              <div v-else class="gl_color_success">
                <i class="el-icon-success" />
              </div>
            </el-form-item>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-divider />
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :offset="10" :span="2">
              <el-button type="primary" size="mini" @click="uploadGroup">确定</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <authentication ref="authentication" :delegation-id="delegationId" :create-delegation-input="createDelegationInput" />
  </div>
</template>

<script>
import authentication from '@/components/AgencyCertification/index.vue';
import validator from '@/lib/validate/index.js';
import { mapState, mapActions } from 'vuex';
// import photoCropperDialog from './photoCropperDialog';
import { CopyData } from '@/lib';
import {
  SiSTKWEventsManagementCreateDelegationInput
} from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementDelegationId,
  api_PUT_EventsManagementDelegationId
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'Team',
  components: {
    authentication
    // photoCropperDialog
  },
  props: {
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      dictDelegationType: [], // 机构类型字典
      userPhoneNumber: '', // 账号名称
      delegationId: '',
      createDelegationInput: new SiSTKWEventsManagementCreateDelegationInput(),
      createDelegationInput_Rules: {
        delegationTypeCode: [
          validator.required('请选择机构类型')
        ],
        teamName: [
          validator.required('参赛机构名称不能为空')
        ],
        contactPerson: [
          validator.required('联系人不能为空')
        ],
        teamShortName: [
          validator.required('参赛机构简称不能为空')
        ],
        phoneNumber: [
          validator.required('联系人手机号码不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式不正确'));
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache,
      dict: state => state.dict.dict
    })
  },
  watch: {
    isShow: {
      handler: function(val) {
        if (val) {
          this.getGroup();
          this.getDictByType(['district']);
          this.getDict().then(res => {
            this.dictDelegationType = res.delegationType;
          });
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    const _query = this.$route.query;
    this.delegationId = _query.delegationId ? _query.delegationId : _query.id;
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取团体信息
    getGroup() {
      this.loading = true;
      var that = this;
      api_GET_EventsManagementDelegationId(this.delegationId).then(res => {
        this.userPhoneNumber = res.registerUser.userPhoneNumber;
        CopyData(res, that.createDelegationInput);
        if (res.provinceCode !== '' && res.cityCode !== '' && res.countyCode !== '') {
          that.$set(that.createDelegationInput, 'addressData', [res.provinceCode, res.cityCode, res.countyCode]); // 回显
        }
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    // 团体头像回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 保存团体头像
    rightLogoPhotoCropperSave(fileUrl) {
      this.$set(this.createDelegationInput, 'imagePath', fileUrl.tempUrl);
    },
    openPhotoCropper(code) {
      this.$refs[code + 'PhotoCropper'].open(this.createDelegationInput[code]);
    },
    // 更新团体信息
    uploadGroup() {
      this.loading = true;
      this.$refs['createDelegationInput'].validate((valid) => {
        if (valid) {
          api_PUT_EventsManagementDelegationId(this.delegationId, this.createDelegationInput).then(res => {
            this.$message({
              type: 'success',
              message: '更新成功'
            });
            this.getGroup();
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          });
        }
      });
    },
    // 进行机构认证
    goAuthentication() {
      this.$refs.authentication.openAuthentication();
    }
  }
};
</script>

<style scoped>
.group{
  color: #333;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.09);
}
/* .el-form>>>.el-form-item label:after {
  content: " ";
  display: inline-block;
  width: 100%;
}
.el-form>>>.el-form-item__label {
  text-align: justify;
  height: 30px;
} */
.label {
  text-align: right;
  font-weight: 700;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
.el-form>>>.el-form-item {
  margin-bottom: 10px;
}
.el-select,.el-cascader {
  width: 100%;
}
.upload_game_img {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  /* border: 1px dotted #DCDFE6; */
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload_game_img:hover {
  border-color: #409eff;
}
.upload_game_img .show_img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}
</style>
